<template>
  <div class="leftwrap">
    <div class="leftcwrap">
      <div class="leftbox usermenuBox">
        <el-row class="tac">
          <el-col :span="24">
            <el-menu
              :default-active="defaultActive"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#fff"
              text-color="#666" router
              active-text-color="#3161ff"
              :unique-opened="true" :default-openeds="openeds"
              :collapse-transition="true">
              <el-submenu index="1">
                <template slot="title">
                  <span>授权管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/authcode">授权码订单</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="/prolist">商品列表</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LeftMenu',
  data () {
    return {
      openeds: ['1', '/prolist']
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  },
  computed: {
    //  获取当前路由渲染页面菜单
    defaultActive () {
      let pathLength = this.$route.path.slice(1).split('/')[0]
      if (pathLength === 'prolist') {
        let path =
          '/' + this.$route.path.split('/').reverse()[0]
        return path
      } else if (pathLength === 'prodetail') {
        let path = '/prolist'
        return path
      } else if (pathLength === 'authcode') {
        let path = '/authcode'
        return path
      } else if (pathLength === 'authcodedetail') {
        let path = '/authcode'
        return path
      }
    }
  }
}
</script>

<style lang="stylus">
@import '~styles/varibles.styl'
.usermenuBox .el-menu {
    border-right: 0;
}
.usermenuBox li.el-submenu {
  border-bottom: 1px solid #e4e4e4;
  line-height: 60px;
  background-color: #fff;
  box-sizing: border-box;
  font-size: 16px;
  color: #666;
  padding: 0!important;
}
.usermenuBox .el-submenu__title {
  height: 59px;
  line-height: 58px;
  font-size: 16px;
  padding: 0 0 0 27px!important;
  border-left: 4px solid #fff;
}
.usermenuBox .el-submenu__title:hover {
  border-left: 4px solid #7494ff!important;
  background-color: #f8f8f8!important;
}
.usermenuBox .el-submenu__title:focus {
  border-left: 4px solid $baseColor!important;
  background-color: #fff!important;
  color: $baseColor!important;
}
.usermenuBox .el-menu-item.is-active {
  border-left: 4px solid $baseColor;
  background-color: #fff;
  color: $baseColor;
}
.usermenuBox .el-menu-item {
  border-left: 4px solid #fff;
  border-bottom: 1px solid #e4e4e4;
  height: 59px;
  line-height: 58px;
  background-color: #fff;
  box-sizing: border-box;
  font-size: 16px;
  color: #666;
  padding: 0 0 0 23px!important;
}
.usermenuBox .el-menu-item:hover {
  border-left: 4px solid #7494ff!important;
  background-color: #f8f8f8!important;
}
.usermenuBox .el-menu-item:focus {
  border-left: 4px solid $baseColor!important;
  background-color: #fff!important;
  color: $baseColor!important;
}
.usermenuBox ul[role="menu"] .el-menu-item {
  width: 100%;
  min-width: 1px;
  line-height: 40px;
  height: 40px;
  box-sizing: border-box;
  font-size: 14px;
  border-bottom: 0;
  padding: 0 0 0 23px!important;
}
.usermenuBox ul[role="menu"] .el-menu-item-group .el-menu-item-group__title {
  height: 0;
  padding: 0!important;
}
.usermenuBox ul[role="menu"] .el-menu-item-group:last-child {
  margin-bottom: 21px;
}
.usermenuBox .el-submenu__title i{
  color: #cbcbcb!important;
  font-size: 18px!important;
  right: 18px!important;
}
</style>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.leftwrap
  background-color $bgCfff
  width 180px
  position absolute
  z-index 2
  top 0
  left 0
  height 100%
  box-sizing border-box
  padding-top 70px
  overflow hidden
.leftcwrap
  height 100%
  width 180px
  position relative
.leftbox
  height 100%
  overflow-x hidden
  overflow-y auto
  width 180px
  box-sizing border-box
.leftbox::-webkit-scrollbar-track-piece
  background-color rgba(0, 0, 0, 0)
  border-left 1px solid rgba(0, 0, 0, 0)
.leftbox::-webkit-scrollbar
  width 4px
  height 8px
  border-radius 4px
.leftbox::-webkit-scrollbar-thumb
  background-color rgba(0, 0, 0, 0.1)
  background-clip padding-box
  border-radius 4px
  min-height 10px
.leftbox::-webkit-scrollbar-thumb:hover
  background-color rgba(0, 0, 0, 0.2)
  border-radius 4px
</style>
